<template>
  <div class="deposit-history">
    <div class="deposit-aq">
      <el-row>
        <el-col :span="1">
          <img src="" alt="Picture loading...">
        </el-col>
        <el-col :span="10">
          <div class="aq-left">
            <p class="aq-token">AQ (Anteque Token)</p>
            <p class="aq-tokal">Total Balance</p>
            <p class="aq-avai">Available</p>
            <p class="aq-avai">Frozen</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="aq-right">
            <p class="aq-token">≈ USD 80,077.5300</p>
            <p class="aq-tokal">288,880.0000</p>
            <p class="aq-avai">88,880.0000</p>
            <p class="aq-avai">200,000.0000</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="deposit-code">
      <h2>DEPOSIT</h2>
      <div class="code-content">
        <ul>
          <li class="code-aq">
            <img src="" alt="Picture loading...">
            <span>AQ</span>
          </li>
          <li class="qr-code">
            <img src="" alt="Picture loading...">
            <p>3FbVFfGprHg1p8Tq6JTEh5pzqWQ4w6147s</p>
          </li>
          <li class="copy-qr">
            <el-button>
              <i class="el-icon-copy-document"></i>Copy Address
            </el-button>
            <el-button>
              <i class="el-icon-s-grid"></i>Download QR Code
            </el-button>
            <p>Send only AQ to this deposit address.</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.deposit-history {
  padding: 20px;
  border-radius: 10px;
  .deposit-aq {
    padding-bottom: 30px;
    img {
      width: 25px;
      height: 25px;
      display: inline-block;
      vertical-align: middle;
    }
    .aq-token {
      color: #050505;
      font-size: 20px;
      display: inline-block;
      vertical-align: middle;
    }
    .aq-tokal {
      color: #f7cf4a;
      font-size: 18px;
      padding: 15px 0px;
    }
    .aq-avai {
      color: #bdbcbc;
      font-size: 16px;
      padding: 15px 0px;
    }
    .aq-right {
      text-align: right;
    }
  }
  .deposit-code {
    h2 {
      font-size: 30px;
      font-weight: normal;
    }
    .code-content {
      height: 450px;
      width: 100%;
      margin: 20px 0;
      border: 1px solid #ccc;
      padding: 50px 0;
      border-radius: 20px;
      ul {
        text-align: center;
        line-height: 50px;
        .code-aq {
          img {
            display: inline-block;
            width: 25px;
            vertical-align: middle;
            margin-right: 15px;
          }
          span {
            font-size: 25px;
            font-weight: normal;
            display: inline-block;
            vertical-align: middle;
          }
        }
        .qr-code {
          p {
            font-size: 16px;
            font-weight: normal;
            color: #f7cf4a;
          }
        }
        .copy-qr {
          .el-button {
            width: 160px;
            font-size: 12px;
          }
          p {
            font-size: 14px;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
